<template>
  <Header 
          ref="headerRef"
          @city-searched="handleCitySearch"
          @draw-type-change="handleDrawTypeChange"
          @mark-type-change="handleMarkTypeChange"
          :received-zoom-change="disableMarkSelect"
         
  />
  <Map 
       :target-adcode="currentAdcode"
       :draw-type="currentDrawType"
       :reset-draw-type="resetDrawType"
       :mark-type="currentMarkType"
       :reset-mark-type="resetMarkType"
        @zoom-changed="handleZoomChange"
  />
</template>

<script setup>
import { ref } from 'vue';

import Header from './components/Header.vue';
import Map from './components/Map.vue';

const currentAdcode = ref(null);
const currentDrawType = ref(null);
const currentMarkType = ref(null);
const headerRef = ref(null);
const disableMarkSelect = ref(true);

const handleCitySearch = (adcode) => {
  currentAdcode.value = adcode;
}

const handleDrawTypeChange = (type) => {
  currentDrawType.value = type;
}

const handleMarkTypeChange = (type) => {
  currentMarkType.value = type;
};

const resetDrawType = () => {
  if(headerRef.value) {
    headerRef.value.resetDrawType();
  }
}

const resetMarkType = () => {
  if (headerRef.value) {
    headerRef.value.resetMarkType();
  }
  currentMarkType.value = null;
};

const handleZoomChange = (shouldDisable) => {
  disableMarkSelect.value = shouldDisable;
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>